<template>
	<view>
		<u-navbar title="地址详情" autoBack bg-color="#f4f4f4" placeholder>
			<view slot="right" class="u-f-28" v-if="id" @click="delItem(id)">
				删除
			</view>
		</u-navbar>
		<view class="u-p-30">
			<view class="u-r-20 u-bg-fff" style="padding: 0 20rpx;">
				<view class="u-flex-y-center" style="padding: 40rpx 0;border-bottom: 1px solid #f4f4f4;">
					<view class="u-f-28" style="width: 146rpx;">姓名</view>
					<input placeholder="收货人姓名" class="u-f-28 u-flex-1" v-model="addressInfo.username"/>
				</view>
				<view class="u-flex-y-center" style="padding: 40rpx 0;border-bottom: 1px solid #f4f4f4;">
					<view class="u-f-28" style="width: 146rpx;">手机号</view>
					<input placeholder="收货人手机号" class="u-f-28 u-flex-1"  maxlength="11" type="number" 	v-model="addressInfo.mobile"/>
				</view>
				<view class="u-flex-y-center" style="padding: 40rpx 0;border-bottom: 1px solid #f4f4f4;"  @click="show=true">
					<view class="u-f-28" style="width: 146rpx;">所在地址</view>
					
					<input placeholder="选择收货地区" class="u-f-28 u-flex-1" v-model="addressInfo.area" disabled/>
					<image src="../../../static/address2.png" style="width: 36rpx;height: 36rpx;"></image>
				</view>
				<view class="u-flex-y-center" style="padding: 40rpx 0;border-bottom: 1px solid #f4f4f4;">
					<view class="u-f-28" style="width: 146rpx;">详细地址</view>
					<input placeholder="需要具体到街道、小区、门牌号" class="u-f-28 u-flex-1" v-model="addressInfo.address"/>
				</view>
			</view>
			<view class="u-r-20 u-bg-fff u-m-t-20" style="padding: 0 20rpx;" @click="changeMR">
				<view class="u-flex-y-center u-flex-between" style="padding: 40rpx 0;">
					<view class="u-f-28">设为默认地址</view>
					
					<image src="../../../static/checked.png" style="width: 38rpx;height: 38rpx;"
									v-if="addressInfo.is_default==1"></image>
								<image src="../../../static/check.png" style="width: 38rpx;height: 38rpx;" v-else></image>
				</view>
			</view>
		</view>
		<view class="appBottom" style="background-color: #f4f4f4;">
			<view class="appBtn u-m-t-30"  @click="save">保存</view>
		</view>
		<u-picker :show="show" keyName="name" ref="uPicker" :columns="columns" :defaultIndex="region" @confirm="confirm" @change="changeHandler" @cancel="show=false"></u-picker>

		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressInfo: {
					area: '',
					username: '',
					mobile: '',
					address: '',
					is_default: 0
				},
				show: false,
								region: [0, 0, 0],
								columns: [
								],

				id: ''
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.loadData(options.id)
			}
				this.loadInfo()
		},
		methods: {
			async loadInfo(){
							const res = await uni.$u.http.post('/Content/area', {
								pid: 0
							})
							this.columns.push(res)
							const res2 = await uni.$u.http.post('/Content/area', {
								pid: res[0].id
							})
							this.columns.push(res2)
							const res3 = await uni.$u.http.post('/Content/area', {
								pid: res2[0].id
							})
							this.columns.push(res3)
						},
						async changeHandler(e) {
							const {
								columnIndex,
								value,
								values, // values为当前变化列的数组内容
								index,
								// 微信小程序无法将picker实例传出来，只能通过ref操作
								picker = this.$refs.uPicker
							} = e
							// 当第一列值发生变化时，变化第二列(后一列)对应的选项
							this.region[columnIndex][index]
							if (columnIndex === 0) {
								const res2 = await uni.$u.http.post('/Content/area', {
									pid: e.value[0].id
								})
								this.columns[1]=res2
								const res3 = await uni.$u.http.post('/Content/area', {
									pid: res2[0].id
								})
								this.columns[2]=res3
							}else if(columnIndex === 1){
								const res3 = await uni.$u.http.post('/Content/area', {
									pid: e.value[1].id
								})
								this.columns[2]=res3
							}
							this.columns=JSON.parse(JSON.stringify(this.columns))
							
						},
						// 回调参数为包含columnIndex、value、values
						confirm(e) {
							console.log('confirm', e)
							this.addressInfo.area=e.value[0].name+e.value[1].name+e.value[2].name
							this.show = false
						},
			changeMR() {
				if (this.addressInfo.is_default == 0) {
					this.addressInfo.is_default = 1
				} else {
					this.addressInfo.is_default = 0
				}
			},
			choose() {
				var _this = this
				uni.chooseAddress({
					success(res) {
						_this.addressInfo.username = res.userName
						_this.addressInfo.area = [res.provinceName, res.cityName, res.countyName]
						_this.addressInfo.mobile = res.telNumber
						_this.addressInfo.address = res.detailInfo

					},
					fail(res) {
						console.log(res)
					}
				})
			},
			async loadData(id) {
				const res = await uni.$u.http.post('/User/addressDetail', {
					address_id: id
				})
				this.addressInfo = res
				this.addressInfo.area = this.addressInfo.area.split(',')
			},
			async save() {
				let data = this.addressInfo
				if (this.user_id) {
					data.user_id = this.user_id
				}
				let res = await uni.$u.http.post('/User/addressModify', data)
				console.log(res)
				if(res == false){
					return
				}
				if(res != null && res.code == 0){
					return uni.$u.toast(res.msg)
				}
				uni.$u.toast('操作成功')
				setTimeout(() => {
					uni.navigateBack()
				}, 500)
			},
			change(e) {
				this.addressInfo.area = e.detail.value
			},
			changeA(e) {
				if (e) {
					this.addressInfo.is_default = 1
				} else {
					this.addressInfo.is_default = 0
				}
			},
			delItem(id) {
				var _this = this
				uni.showModal({
					title: '是否删除地址',
					async success(result) {
						if (result.confirm) {
							await uni.$u.http.post('/User/addressDel', {
								address_id: id
							})
							uni.$u.toast('操作成功')
							uni.navigateBack()
						}
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f4f4f4;
	}
</style>
